<template>
	<view class="login_bg">
		<view class="like_top">
			<view class="back">
				<view class="back_img" @click="back()"><image src="../../static/images/left.png" mode="widthFix"></image></view>
			</view>
			<view class="sub" @click="toggle('bottom')">...</view>
		</view>
		
		<view>
			<uni-popup ref="popup" :type="rr" :animation="false" :maskClick="true" @change="changee" >
			            <view class="aitlce">
							<view class="more_cz">更多操作</view>
							<view class="lahei">
								<view class="lahei_01">拉黑</view>
								<view class="lahei_01">举报</view>
							</view>
							<view class="qxcz"  @click="closee">
								<view class="lahei_02">取消</view>
							</view>
			            </view>
			</uni-popup>
		</view>
		
		<view class="yulan_banner">
			<view class="peopleSwiper">
			    <swiper class="bigImg" :current="current">
					<swiper-item v-for="(big,index) in imgSwiperData" :key="index">
					  <image :src="big.imgUrl" mode="scaleToFill"></image>
					</swiper-item>
			    </swiper>
				<view class="name">
					  <view class="namme">
						  <view>{{userInfo.user.nickname}}</view>
						  <view class="name_pic"><image src="../../static/images/ico.png" mode="widthFix"></image></view>
					  </view>
					  <view class="guanzhu">
						  <view class="guanzhu_img"><image src="../../static/images/icon_love-22560b65.png" mode="widthFix"></image></view>
						  <view>关注</view>
					  </view>
				</view>
				<view class="city">
					<view class="city_left">
						<view class="city_dw">
							<view class="dingwei"><image src="../../static/images/icon_dw_white-6a046998.png" mode="widthFix"></image></view>
							<view class="city_dw_txt">苏州市</view>
						</view>
						<view class="shuxian"></view>
						<view class="city_dw">
							<view class="city_dw_txt">TA距离你</view>
						</view>
						<view class="city_dw">
							<view class="dingweii"><image src="../../static/images/ic_chongxindingwei-cb8e9121.png" mode="widthFix"></image></view>
							<view class="city_dw_txtt">重新定位</view>
						</view>
				    </view>
					<view class="guanzhu_num"><text>36</text><text>关注TA</text></view>
			    </view>
			    <scroll-view class="smallImg" scroll-x="true">
					<view v-for="(small,index) in imgSwiperData1" :key="index" @click="changeBigPic(index)" class="smallItemm">
					  <image :src="small.imgUrl" mode="widthFix" class="smallItem" :class="[index == current ? 'active' : '']"></image>
					</view>
			    </scroll-view>
			</view>
		</view>

		<view class="yulan_xinxi">
			<view class="yulan_xinxi_about">
				<view class="about"><image src="../../static/images/icon_about-a5b7c014.png" mode="widthFix"></image></view>
				<view class="about_txt">关于我</view>
			</view>
			<view class="jianjie_message">
				<view><text class="jianjie_message_left">ID:</text> <text class="jianjie_message_right">84049515</text></view>
				<view><text class="jianjie_message_left">年龄:</text><text class="jianjie_message_right">30岁</text></view>
				<view><text class="jianjie_message_left">身高:</text><text class="jianjie_message_right">180cm</text></view>
				<view><text class="jianjie_message_left">体重:</text><text class="jianjie_message_right">70kg</text></view>
				<view><text class="jianjie_message_left">常驻:</text><text class="jianjie_message_right">苏州</text></view>
				<view><text class="jianjie_message_left">简介:</text><text class="jianjie_message_right">小骚货小骚货小骚货小骚货小骚货</text></view>
			</view>
		</view>
		
		<view class="yulan_xinxi">
			<view class="yulan_dongtai">动态</view>
			<view class="dt_list">
				<view class="dt_list_list" @click="index_article()">
					<view class="_item-avatar-container_1rcf4_108">
						<view class="_default-avatar_1q5io_79 _default-avatar-black_1q5io_94 _item-avatar-img_1rcf4_114" style="font-size: 6.4vw;">
							<image class="_default-avatar-img_1q5io_88" src="../../static/images/w270_h270_qm.png" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="_item-image-container_1rcf4_122">
						<image class="_item-image-bg_1rcf4_128" src="../../static/images/1.png"></image>
						<view class="_item-image-count_1rcf4_133">
								<image class="_item-image-count-icon_1rcf4_151" src="../../static/images/icon_photo-76118c53.png"></image>
								<span>1</span>
						</view>
					</view>
					
                    <view class="_post-item-image-content_1rcf4_51">
						<view class="_item-content-container_1rcf4_63">
							<view class="_item-content-text_1rcf4_69"></view>
							<view class="_item-content-like_1rcf4_80">
								<image class="_item-content-like-icon_1rcf4_89" src="../../static/images/icon_ZAN-8829f78a.png"></image>
								<span>赞</span>
							</view>
						</view>
						<view class="_item-info-container_1rcf4_96">
							<view class="_space-container_9reue_1">
								<view class="_space-item_9reue_9">
									<span>2小时前</span>
								</view>
								<view class="_space-item-split_9reue_10">
									<view class="_divider-vertical_9reue_17" style="border-inline-start-color: rgb(153, 153, 153);"></view>
								</view>
								<view class="_space-item_9reue_9">
									<span>苏州市</span>
								</view>
						    </view>
					    </view>
					</view>
				</view>
				
				<view class="dt_list_list">
					<view class="_item-avatar-container_1rcf4_108">
						<view class="_default-avatar_1q5io_79 _default-avatar-black_1q5io_94 _item-avatar-img_1rcf4_114" style="font-size: 6.4vw;">
							<image class="_default-avatar-img_1q5io_88" src="../../static/images/w270_h270_qm.png" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="_item-image-container_1rcf4_122">
						<image class="_item-image-bg_1rcf4_128" src="../../static/images/1.png"></image>
						<view class="_item-image-count_1rcf4_133">
								<image class="_item-image-count-icon_1rcf4_151" src="../../static/images/icon_photo-76118c53.png"></image>
								<span>1</span>
						</view>
					</view>
					
				    <view class="_post-item-image-content_1rcf4_51">
						<view class="_item-content-container_1rcf4_63">
							<view class="_item-content-text_1rcf4_69"></view>
							<view class="_item-content-like_1rcf4_80">
								<image class="_item-content-like-icon_1rcf4_89" src="../../static/images/icon_ZAN-8829f78a.png"></image>
								<span>赞</span>
							</view>
						</view>
						<view class="_item-info-container_1rcf4_96">
							<view class="_space-container_9reue_1">
								<view class="_space-item_9reue_9">
									<span>2小时前</span>
								</view>
								<view class="_space-item-split_9reue_10">
									<view class="_divider-vertical_9reue_17" style="border-inline-start-color: rgb(153, 153, 153);"></view>
								</view>
								<view class="_space-item_9reue_9">
									<span>苏州市</span>
								</view>
						    </view>
					    </view>
					</view>
				</view>
				
				<view class="dt_list_list">
					<view class="_item-avatar-container_1rcf4_108">
						<view class="_default-avatar_1q5io_79 _default-avatar-black_1q5io_94 _item-avatar-img_1rcf4_114" style="font-size: 6.4vw;">
							<image class="_default-avatar-img_1q5io_88" src="../../static/images/w270_h270_qm.png" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="_item-image-container_1rcf4_122">
						<image class="_item-image-bg_1rcf4_128" src="../../static/images/1.png"></image>
						<view class="_item-image-count_1rcf4_133">
								<image class="_item-image-count-icon_1rcf4_151" src="../../static/images/icon_photo-76118c53.png"></image>
								<span>1</span>
						</view>
					</view>
					
				    <view class="_post-item-image-content_1rcf4_51">
						<view class="_item-content-container_1rcf4_63">
							<view class="_item-content-text_1rcf4_69"></view>
							<view class="_item-content-like_1rcf4_80">
								<image class="_item-content-like-icon_1rcf4_89" src="../../static/images/icon_ZAN-8829f78a.png"></image>
								<span>赞</span>
							</view>
						</view>
						<view class="_item-info-container_1rcf4_96">
							<view class="_space-container_9reue_1">
								<view class="_space-item_9reue_9">
									<span>2小时前</span>
								</view>
								<view class="_space-item-split_9reue_10">
									<view class="_divider-vertical_9reue_17" style="border-inline-start-color: rgb(153, 153, 153);"></view>
								</view>
								<view class="_space-item_9reue_9">
									<span>苏州市</span>
								</view>
						    </view>
					    </view>
					</view>
				</view>
				
				<view class="dt_list_list">
					<view class="_item-avatar-container_1rcf4_108">
						<view class="_default-avatar_1q5io_79 _default-avatar-black_1q5io_94 _item-avatar-img_1rcf4_114" style="font-size: 6.4vw;">
							<image class="_default-avatar-img_1q5io_88" src="../../static/images/w270_h270_qm.png" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="_item-image-container_1rcf4_122">
						<image class="_item-image-bg_1rcf4_128" src="../../static/images/1.png"></image>
						<view class="_item-image-count_1rcf4_133">
								<image class="_item-image-count-icon_1rcf4_151" src="../../static/images/icon_photo-76118c53.png"></image>
								<span>1</span>
						</view>
					</view>
					
				    <view class="_post-item-image-content_1rcf4_51">
						<view class="_item-content-container_1rcf4_63">
							<view class="_item-content-text_1rcf4_69"></view>
							<view class="_item-content-like_1rcf4_80">
								<image class="_item-content-like-icon_1rcf4_89" src="../../static/images/icon_ZAN-8829f78a.png"></image>
								<span>赞</span>
							</view>
						</view>
						<view class="_item-info-container_1rcf4_96">
							<view class="_space-container_9reue_1">
								<view class="_space-item_9reue_9">
									<span>2小时前</span>
								</view>
								<view class="_space-item-split_9reue_10">
									<view class="_divider-vertical_9reue_17" style="border-inline-start-color: rgb(153, 153, 153);"></view>
								</view>
								<view class="_space-item_9reue_9">
									<span>苏州市</span>
								</view>
						    </view>
					    </view>
					</view>
				</view>
				
				
				
				
				
				
				
            </view>	
		</view>

		<view class="_actions_ytyx9_1">
			<view class="_actions-wrap_ytyx9_8">
				<view class="_button_1202d_1 _action-button_ytyx9_25" @click="togglee('center')">加微信</view>
				<view class="_button_1202d_1 _action-button_ytyx9_25" @click="togglee('center')" style="width: 33.3333vw; height: 12vw; background: linear-gradient(268deg, rgb(0, 136, 234) 0%, rgb(45, 244, 197) 100%);">立即留言</view>
			</view>
		</view>
		
		<view>
			<uni-popup ref="popupp" :type="tt" :animation="false" :maskClick="true" @change="change"  change="sss" :overlay="true" :overlayStyle="'background-color: rgba(0, 0, 0, 1);'">
				<view class="_tips_1y6rx_9"><view class="_highlight_1y6rx_14">是否解锁TA的私聊和相册?</view></view>
				<view class="_close_1y6rx_76"  @click="close"><image src="../../static/images/cha.png" mode="widthFix"></image></view>
			            <view class="aitlce1">
							<view class="menuList">
								<view style="background-color: rgb(54, 46, 40);width: 100%;border-top-left-radius: 3.73333vw;">
									<view :class="(currIndex==index) ? 'curr' : ''"  v-for="(small,index) in menuList" :key="index"  @click="catchTab(index)">
										<image :src="small.imgUrl" :class="[index == current ? 'active' : '']" class="ss"></image>
									</view>
								</view>
							</view>
							<view v-show="currIndex==0">
								<view style="background-color: #ffd898;border-bottom-left-radius: 7vw;border-bottom-right-radius: 7vw;">
									<swiper class="swiper" circular :indicator-dots="true" :autoplay="autoplay"
									    :duration="duration" v-show="bannerEable">
										<swiper-item><image src="../../static/images/11.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/22.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/33.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/44.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/55.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
									</swiper>
									<view class="_products_1y6rx_83">
										<view class="_item_1y6rx_91 _vip-item_1y6rx_119">
											<view class="_time_1y6rx_100">1个月</view>
											<view class="_price_1y6rx_105"><text class="_currency_1y6rx_110">￥</text>198</view>
											<view class="_desc_1y6rx_113">折合￥$6.6/天</view>
										</view>
									</view>
								</view>
							</view>
							<view v-show="currIndex==1">
								<view style="background-color: #514638;border-bottom-left-radius: 7vw;border-bottom-right-radius: 7vw;">
									<swiper class="swiper" circular :indicator-dots="true" :autoplay="autoplay"
									    :duration="duration" v-show="bannerEable">
										<swiper-item><image src="../../static/images/svip11.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/svip22.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/svip11.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/svip22.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
										<swiper-item><image src="../../static/images/svip11.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
									</swiper>
									<div class="_products_1y6rx_83">
										<div class="_item_1y6rx_91 _svip-item_1y6rx_124 _svip-item-selected_1y6rx_131">
											<div class="_time_1y6rx_100">3个月</div>
											<div class="_price_1y6rx_105">
												<span class="_currency_1y6rx_110">￥</span>398
											</div>
											<div class="_desc_1y6rx_113">折合￥$4.42/天</div>
										</div>
										<div class="_item_1y6rx_91 _svip-item_1y6rx_124">
											<div class="_time_1y6rx_100">6个月</div>
											<div class="_price_1y6rx_105">
												<span class="_currency_1y6rx_110">￥</span>498
											</div>
											<div class="_desc_1y6rx_113">折合￥$2.77/天</div>
										</div>
										<div class="_item_1y6rx_91 _svip-item_1y6rx_124">
											<div class="_time_1y6rx_100">12个月</div>
											<div class="_price_1y6rx_105"><span class="_currency_1y6rx_110">￥</span>898</div>
											<div class="_desc_1y6rx_113">折合￥$2.49/天</div>
										</div>
									</div>
								</view>
							</view>
							<view class="_footer_1y6rx_141">
								<view><image class="_btn_1y6rx_145" src="../../static/images/btn_svip-6d73c7bf.png" alt="" mode="widthFix"></image></view>
								<view class="_text_1y6rx_150">成为会员即表示同意
									<text @click="" class="xieyi">《会员服务协议》</text>
								</view>
							</view>
						
						
						</view>
			</uni-popup>
		</view>
		
		
		
	</view>
</template>

<script>
	import request from '../../utils/http.js'
	export default {
	  data() {
	    return {
			autoplay:true,
			interval:5000,
			duration:500,
			bannerEable:true,
			bs:false,
			isCheckeddd:false,
			// menuList:['VIP','SVIP'],
			currIndex:0,
		    currIndex1:0,
		    rr: 'bottom',
		    tt: 'center',
		    isPopupShow: false,
	        current: 0,//轮播图索引
	        imgSwiperData:[
					{id:0,imgUrl:"http://wp.huaxijiance.com/1.png"},                
					{id:1,imgUrl:"http://wp.huaxijiance.com/1.png"},        
					{id:2,imgUrl:"http://wp.huaxijiance.com/1.png"},        
					{id:3,imgUrl:"http://wp.huaxijiance.com/1.png"},
					{id:4,imgUrl:"http://wp.huaxijiance.com/1.png"},
	      ],
		  imgSwiperData1:[
		  			{id:0,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},                
		  			{id:1,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},        
		  			{id:2,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},        
		  			{id:3,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},
		  			{id:4,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},
		  ],
		  menuList:[
		  			{id:0,imgUrl:"http://wp.huaxijiance.com/huiyuan01.png"},                
		  			{id:1,imgUrl:"http://wp.huaxijiance.com/huiyuan001.png"},        
		  			
		  ],
		  id:"",
		  userInfo:[]
	    }
	  },
	  computed:{
	  	cdnUrl(){
	  		return uni.cdnURL
	  	}
	  },
	  onLoad(option) {
	  	this.id = option.id;
		this.getUserInfo()
	  },
	  methods:{
		  back(){
		  	uni.navigateBack({
		  		delta:1,
		  	})
		  },
		  getUserInfo(){
		  	request({
		  		url: '/user/userDetail',
		  		method:'post',
		  		data: {id:this.id},
		  	}).then(res => {
		  		let result = res.data;
		  		if(result.code==1){
		  			this.userInfo = result.data
		  		}else{
		  			uni.showToast({
		  				icon:'error',
		  				title:result.msg
		  			})
		  		}
		  	}).catch(err => {
		  	  console.error(err);
		  	});
		  },
	    //点击小图切换指定大图
		index(){
			uni.navigateTo({
				url:'/pages/index/index'
			})
		},
		index_article(){
			uni.navigateTo({
				url:'/pages/index_article/index_article'
			})
		},
		changeBigPic(index){
		  this.current = index;
		},
		toggle(rr) {
		    this.type = rr;
		    this.$refs['popup'].open();
		},
		togglee(tt) {
		    this.type = tt;
		    this.$refs['popupp'].open();
		},
		closee(rr){
			this.type = rr;
			this.$refs.popup.close()
		},
		close(tt){
			this.type = tt;
			this.$refs.popupp.close()
		},
		catchTab(index){
					this.currIndex = index
				},
				catchTabb(index1){
					this.currIndex1 = index1
				},
		    
			},
	  }


</script>

<style>
  @import "../../static/css/index_article.css";
</style>
